import { Modal, Grid, Input } from '@arco-design/web-react';
import { IconPlus } from '@arco-design/web-react/icon';
import { useState } from "react"
import React from "react"
// import { useRequest } from 'ahooks';
const Row = Grid.Row;
const Col = Grid.Col;
const ManageSysModal = ({ onCancel, open }) => {

    const [audioList, setAudioList] = useState([{ name: '客户欢迎' }, { name: '分组1' }])
    const [audioName, setAudioName] = useState('')
    const [inputStatus, setInputStatus] = useState("")  // "" 初始  0 新增  other 编辑""
    const onPressEnter = (index) => {
        const reset = () => {
            setAudioName("")
            setInputStatus("")
        }
        if (!audioName) return reset();
        if (audioList.find(item => item.name === audioName)) {
            React.$message.error(audioName + " 名称已存在")
            return reset()
        }
        // 编辑
        if (inputStatus) {
            if (audioList.find(item => item.name === audioName))
                console.log("编辑", index, inputStatus)
            setAudioList(audioList.map((item, i) => {
                if (i === index) {
                    return { name: audioName }
                } else {
                    return item
                }
            }))
            return reset()
        }
        // 新增
        console.log("增加", index)

        audioList.push({ name: audioName });
        setAudioList(audioList)
        reset()
    }
    const deleteName = (name) => {
        React.$confirm({
            // title:'删除音频分组',
            content: '确定删除该分组吗？',
            onOk: () => {
                setAudioList(audioList.filter(item => item.name !== name))
            },
        })
    }
    
    // const { run: onOk } = useRequest(
        // async () => {
            // onCancel()
        //  对接 列表修改音频分组接口
        //   return changeAudio({
        //     account,
        //     newPwd: btoa(values.newPw),
        //     originPwd: btoa(values.password)
        //   })
        // },
        // {
        //   manual: true,
        //   onSuccess: (res) => {
        //     React.$message.success('修改成功')
        //     // Token.set(res.token)
        //     onCancel()
        //   }
        // }
    //   )
    
    const inputName = (index) => {
        return (
            <>
                <Row align='center' className="h-40" style={{ borderBottom: '1px solid rgb(237,237,237)' }}>
                    <Col span={24}>
                        <Input
                            maxLength={20}
                            showWordLimit
                            placeholder='请输入音频分组名称'
                            style={{ width: '100%' }}
                            value={audioName}
                            onChange={(e) => { setAudioName(e) }}
                            onPressEnter={() => onPressEnter(index)}
                        />
                    </Col>
                </Row>
            </>
        )
    }

    return (
        <Modal
            title={
                <div style={{ textAlign: 'left' }}>
                    音频分组
                </div>
            }
            visible={open}
            onOk={onCancel}
            onCancel={onCancel}
            autoFocus={false}
            focusLock={true}
        >
            <div className='flex flex-row-reverse items-center text-sky-500 cursor-pointer' onClick={() => setInputStatus(0)}>新建策略包 <IconPlus /></div>
            <Row align='center' className="bg-gray-50  h-40 " style={{ borderBottom: '1px solid rgb(214,211,211)' }}>
                <Col offset={1} span={11}>音频分组名称</Col>
                <Col offset={1} span={11}>操作</Col>
            </Row>
            {audioList.map((item, index) =>
                <div key={item.name}>
                    {inputStatus !== 0 && inputStatus && item.name == inputStatus ? inputName(index) :
                        <Row align='center' className="h-40" style={{ borderBottom: '1px solid rgb(237,237,237)' }}>
                            <Col offset={1} span={11}>{item.name}</Col>
                            <Col offset={1} span={11} className="text-sky-500 flex">
                                <div className='cursor-pointer mr-10' onClick={() => { setInputStatus(item.name) }}>编辑</div> |
                                <div className='cursor-pointer ml-10' onClick={() => { deleteName(item.name) }}>删除</div>
                            </Col>
                        </Row>
                    }
                </div>
            )}
            {inputStatus === 0 && inputName()}
           
        </Modal>
    )
}

export default ManageSysModal;